<ng-container *ngIf="!outlet.isActivated">
    <ts-timepicker #timepickerOne="tsTimepicker" [(ngModel)]="timeStar" [color]="global.params.color"></ts-timepicker>
    <ts-timepicker #timepickerTwo="tsTimepicker" [(ngModel)]="timeEnd" [color]="global.params.color"></ts-timepicker>

    <div class="px-5 py-2">
        <h4 style="font-size: 1.1rem;font-weight:400;" class="mt-5 mb-5 text-center">新增考勤表</h4>
        <div class="row">
            <div class="input-group mb-3 col">
                <div class="input-group-prepend">
                    <span class="input-group-text bg border-0">考勤组名称</span>
                </div>
                <input [(ngModel)]="search.params.name" type="text" class="bg border-l-0 border-r-0 radius-0 border-t-0 form-control">
            </div>
            <div class="input-group mb-3 col">
                <div class="input-group-prepend">
                    <span class="input-group-text bg border-0">考勤组编号</span>
                </div>
                <input [(ngModel)]="search.params.name" type="text" class="bg border-l-0 border-r-0 radius-0 border-t-0 form-control">
            </div>

            <div class="input-group mb-3 col">
                <div class="input-group-prepend">
                    <span class="input-group-text bg border-0">节假日设置</span></div>
                <div class="border-l-0 border-r-0 radius-0 border-t-0 form-control p-0">
                    <select [(ngModel)]="goods.goodsParentType" class="bg custom-select border-0" title="请选择节假日设置">
            <option *ngFor="let type of parentTypes" [ngValue]="type.value">{{type.text}}</option>
          </select>
                </div>
            </div>
            <div class="input-group mb-3 col">
                <div class="input-group-prepend">
                    <span class="input-group-text bg border-0">考勤点</span></div>
                <div class="border-l-0 border-r-0 radius-0 border-t-0 form-control p-0">
                    <select [(ngModel)]="goods.goodsParentType" class="bg custom-select border-0" title="请选择考勤点">
      <option *ngFor="let type of parentTypes" [ngValue]="type.value">{{type.text}}</option>
    </select>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="input-group mb-3 col-sm-6 align-c flex-w-0">
                <div class="input-group-prepend">
                    <span class="input-group-text bg border-0">考勤时间</span>
                </div>
                <ts-checkbox class="mr-5" color="secondary" [value]="3" [(ngModel)]="checkboxValues">每天工作时间相同</ts-checkbox>
                <ts-checkbox class="mr-5" color="secondary" [value]="4" [(ngModel)]="checkboxValues">每天工作时间不同</ts-checkbox>
            </div>
            <div class="input-group mb-3 col-sm-6">
                <div class="input-group-prepend">
                    <span class="input-group-text bg border-0">工作时间</span>
                </div>
                <input tsToggle [bind]="timepickerOne" [target]="timepickerOne" type="text" [value]="timeStar" class="form-control bg pointer" placeholder="开始时间" readonly>
                <div class="input-group-prepend input-group-append">
                    <span class="input-group-text bg border-0">到</span>
                </div>
                <input tsToggle [bind]="timepickerTwo" [target]="timepickerTwo" type="text" [value]="timeEnd" class="form-control bg pointer" placeholder="结束时间" readonly>
            </div>


        </div>
        <div class="row">
            <div class="input-group mb-3 flex-w-0 col">
                <div class="input-group-prepend">
                    <span class="input-group-text bg border-0">异常定义</span>
                </div>
                <div class="input-group">
                    <div class="mr-5 input-group-prepend align-c" *ngFor="let sel of payTerms;index as i" color="secondary">
                        <span>{{sel.beforeInputLabel}}</span>
                        <input *ngIf="sel.hasInput" [(ngModel)]="sel.inputValue" class="bg border-l-0 border-r-0 radius-0 border-t-0 form-control" style="width:50px !important;" type="text">
                        <span>{{sel.afterInputLable}}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="input-group mb-3 col-sm-3">
                <div class="input-group-prepend">
                    <span class="input-group-text bg border-0">拍照设置</span></div>
                <div class="border-l-0 border-r-0 radius-0 border-t-0 form-control p-0">
                    <select [(ngModel)]="goods.goodsParentType" class="bg custom-select border-0" title="请选择拍照设置">
      <option *ngFor="let type of photoTypes" [ngValue]="type.id">{{type.text}}</option>
    </select>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="input-group mb-3 col align-c flex-w-0">
                <div class="input-group-prepend">
                    <span class="input-group-text bg border-0">考勤时间</span>
                </div>
                <ts-checkbox class="mr-5" color="secondary" [value]="6" [(ngModel)]="checkboxValues">指定人员</ts-checkbox>
                <ts-checkbox class="mr-5" color="secondary" [value]="7" [(ngModel)]="checkboxValues">指定部门</ts-checkbox>
                <ts-checkbox class="mr-5" color="secondary" [value]="8" [(ngModel)]="checkboxValues">指定职位</ts-checkbox>
            </div>
        </div>
        <div class="row">
            <div class="input-group mb-3 col-sm-3 align-c flex-w-0">
                <div class="input-group-prepend">
                    <span class="input-group-text bg border-0">人员名称</span>
                </div>
                <div class="border-l-0 border-r-0 radius-0 border-t-0 form-control p-0">
                    <select [(ngModel)]="goods.goodsParentType" class="bg custom-select border-0" title="请选择人员名称">
    <option *ngFor="let type of parentTypes" [ngValue]="type.value">{{type.text}}</option>
  </select>
                </div>
            </div>
        </div>
    </div>
    <div class="my-5 m-btn text-right pr-5">
        <button routerLink="/business/att-set" tsBtn color="white">返回列表</button>
        <button *ngIf="goods.id===0" tsBtn loading color="success" (submit)="confirmInsert($event)">确定</button>
        <button routerLink="/business/att-set" tsBtn color="danger">取消</button>
        <!-- <button tsBtn color="success" (click)="resetForm()">新增</button> -->
        <!-- <button tsBtn color="warning" (click)="resetForm()">打印</button>
        <button tsBtn loading color="primary" (submit)="confirmUpdate($event)">分享</button> -->
    </div>
</ng-container>

<router-outlet #outlet="outlet"></router-outlet>